<template>
  <a-modal
  title="提单录入"
  :visible="visible"
  @ok="handleOk"
  :confirmLoading="confirmLoading"
  @cancel="handleCancel"
  >
    <a-form  :form='form'>
      <!-- 订单号& prjcode  新增时需传递 -->
        <a-form-item  style='display: none;'>
            <a-input   v-decorator='["orderCode",formRule.orderCode]'  />
        </a-form-item>
        <a-form-item   style='display: none;'>
            <a-input   v-decorator='["prjCode",formRule.prjCode]' />
        </a-form-item>
      <!-- 提单code  编辑时需传递 -->
        <a-form-item   style='display: none;'>
            <a-input   v-decorator='["code",formRule.code]' />
        </a-form-item>


      <a-form-item label='提单号' :label-col='{ span : 4}'  :wrapper-col="{ span : 18 }" >
          <a-input placeholder="请输入"  v-decorator='["billNum",formRule.billNum]'/>
      </a-form-item>
      <a-form-item label='提单类型' :label-col='{ span : 4}'  :wrapper-col="{ span : 18 }" >
          <a-radio-group    v-decorator='["billType",formRule.billType]'>
            <a-radio value="1">正本</a-radio>
            <a-radio value="2">复印件</a-radio> 
          </a-radio-group>
      </a-form-item> 
      <a-form-item label='是否电放' :label-col='{ span : 4}'  :wrapper-col="{ span : 18 }" > 
           <a-radio-group  v-decorator='["telexReleaseFlag",formRule.telexReleaseFlag]'>
              <a-radio value="1">是</a-radio>
              <a-radio value="0">否</a-radio>
            </a-radio-group>
      </a-form-item> 
      <a-form-item label='提单附件' :label-col='{ span : 4}'  :wrapper-col="{ span : 18 }" > 
            <fileUpload  v-on:uploading='($event)=>{fileData = $event.fileList}'    v-on:removeFile='remove($event)' :fileList='fileData'  ></fileUpload> 
      </a-form-item>
    </a-form>
     
  </a-modal>
</template>

<script>
  import  { submitLading,LadingDetailByOrder }  from  '@/api/order/index'
  import moment  from  'moment'

    import  fileUpload  from  '@/components/common/fileUpload'
export default {
  name: 'approateRec',
  props:{
      visible:{
        type:Boolean,
        default:false
      },
      // entCode:{
      //   type:String,
      //   default:''
      // }
  },
  data () {
    return {
      confirmLoading: false,
      isEdit:false,
      fileData:[], 

      formRule:{
        //add
        orderCode:{initialValue:''},
        prjCode:{initialValue:''},
        //edit
        code:{initialValue:''},

        billNum:{ rules : [ { required:true,message:'请输入' } ] },
        billType:{ rules : [ { required:true,message:'请输入' }] },
        telexReleaseFlag:{ rules : [ { required:true,message:'请选择' } ] },
      },

    }
  },
  methods:{
    //提交 信息
    handleOk(e) {
      let that = this , url
      that.form.setFieldsValue({entCode:that.entCode})
        this.form.validateFields((err, values) => {
          if (!err) {
            // console.log(values)
            this.confirmLoading = true;   
             /*上传文件处理*/
            values.fileList = this.fileData.map(item=>{
                return {
                    code:item.status == 'done' ?  (item.code || item.response.data.code) :'' 
                  }
            }) 

            url = this.isEdit == true ? '/op/lading_bill/modify_lading_bill':'/op/lading_bill/create_lading_bill'
            submitLading(url,values).then((res)=>{
              if(res.data.flag == true){
                this.$message.success(res.data.msg)
                this.$emit('handleOk')
              }
              this.confirmLoading = false
            })
          }
          else{
            console.log(err)
          }
        });
    },
    handleCancel(e) {
      /*取消时文件数据清空*/
      this.fileData =[]
      this.$emit('handleCancel') 
    },

    /*功能函数*/
    /*文件上传中 filelist为受控组件，需要响应自组件上传的文件才能继续上传*/
    uploading(e){ 
      this.fileData = e.fileList
    },
    /*移除文件*/
    remove(e){
      // console.log(e)
      this.fileData.map((item,index)=>{
        if(e.code == item.code){
            this.fileData.splice(index,1)
        }
      })
    },
 
  },
  mounted(){
    this.$nextTick(()=>{
      this.$on('openDialog',function(orderCode,prjCode){
        this.isEdit = false
        /*清空表单输入和校验*/
        this.form.resetFields()

        this.formRule.orderCode.initialValue = orderCode
        this.formRule.prjCode.initialValue = prjCode
        // console.log(orderCode,prjCode)
      })
      this.$on('editDialog',function(code){
        this.isEdit = true
        /*清空表单输入和校验*/
        this.form.resetFields()
        /*请求提单详情*/
        LadingDetailByOrder(code).then((res)=>{
          if(res.data.flag == true){
            let data = res.data.data   
            this.form.setFieldsValue( 
              {  billNum : data.billNum , 
                 billType : data.billType , 
                 telexReleaseFlag : data.telexReleaseFlag ,  
                 orderCode : data.orderCode ,  
                 prjCode : data.prjCode ,  
                 code : data.code } )
 
            //提单附件回填/*文件已上传的情况下 回填。注意回填格式 { uid:"",code:"" }*/
            if(data.fileList  && data.fileList.length>0){ 
                this.fileData = data.fileList.map(item=>{
                          return {
                                  uid:item.code,//uid ：default 默认类型回填 ；删除 
                                  code:item.code,//提交表单时 需要取跟上传文件处理后返回同样的code   上传文件后取code
                                  name: item.name,
                                  status: 'done',  
                          }
                      }) 
            } 
          }
        })
 

      })
    })
  },
  computed: {
    // formItemLayout () {
    //   const { formLayout } = this;
    //   return formLayout === 'horizontal' ? {
    //     labelCol: {md:{span:5},lg:{ span: 7 }},  //label 标签布局
    //     wrapperCol: {xxl:{ span: 8 },xl:{ span : 11},lg:{ span :14 },md:{ span : 16 },xs:{ span :24}}, //需要为输入控件设置布局样式时，使用该属性，用法同 labelCol
    //   } : {};
    // },
  },
  beforeCreate () {
    this.form = this.$form.createForm(this);
    // this.form.getFieldDecorator('keys', { initialValue: [0], preserve: true });
  },
  components:{
    fileUpload
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 
</style>
